<template>
   <div id="TimeLine" :style="styleBase">
        <!-- <img :src="require('api/img/back.png')" width="1920px" height="497.3828038213731px"> -->
        <div class="title">
            <div class="title-up">
                <div style="font-size:3em;text-align:center">Museum City</div>
                <div class="title-rect" style="margin-top:1%"></div>
                <div style="margin-top:1.5%;text-align:center">Data Visualization of Luoyang Museum</div>
                
            </div>
            <div class="title-bottom">
                <div class="title-rect"></div>
                <p class="title-content">Luoyang has a civilization history of more than 5000 years, a city history of more than 4000 years, and a capital history of more than 1500 years. Luoyang is one of the birthplaces of Chinese civilization, the eastern starting point of the Silk Road, and the center of the Grand Canal in the Sui and Tang Dynasties. In history, thirteen dynasties established their capitals in Luoyang. There are five major city sites in Luoyang, including Erlitou site, Yanshi Shangcheng site, Dongzhou Wangcheng site, Han Wei Luoyang site and Sui Tang Luoyang site. As of March 2019, Luoyang has three world cultural heritages, including Longmen Grottoes, hanhanguguan and hanjiacang. Luoyang will build and continue to build 18 museums on the basis of 77 existing museums and memorials to ensure that the total number of museums exceeds 100.</p>
                <div class="title-rect"></div>
            </div>

        </div>
        <div class="timeline">
            <div class="timeline-imgs">
                <div class="timeline-imgs-part part1">
                    <img :src="require('assets/img/represent/timeline_2.png')" @mouseenter="transMuseum('洛阳博物馆')" @mouseleave="transMuseum('')" height="45%" width="54%">
                    <img :src="require('assets/img/represent/timeline_1.png')" @mouseenter="transMuseum('洛阳博物馆')" @mouseleave="transMuseum('')" height="40%" width="90%">
                </div>
                <div class="timeline-imgs-part part2">
                    <img :src="require('assets/img/represent/timeline_3.png')" @mouseenter="transMuseum('洛阳博物馆')" @mouseleave="transMuseum('')" height="98%" width="27%">
                    <img :src="require('assets/img/represent/timeline_4.png')" @mouseenter="transMuseum('嵩县嵩州古灯博物馆')" @mouseleave="transMuseum('')" height="90%" width="15%">
                    <img :src="require('assets/img/represent/timeline_5.png')" @mouseenter="transMuseum('洛阳唐三彩陶艺博物馆')" @mouseleave="transMuseum('')" height="98%" width="15%">
                    <img :src="require('assets/img/represent/timeline_6.png')" @mouseenter="transMuseum('洛阳周王城天子驾六博物馆')" @mouseleave="transMuseum('')" height="85%" width="40%" style="margin-left:1.5%;margin-top:4%">
                </div>
                <div class="timeline-imgs-part part3">
                    <div style="display:flex;height:50%;width:100%">
                        <img :src="require('assets/img/represent/timeline_7.png')" @mouseenter="transMuseum('河洛古代石刻艺术博物馆')" @mouseleave="transMuseum('')" height="98%" width="47%">
                        <img :src="require('assets/img/represent/timeline_8.png')" @mouseenter="transMuseum('洛阳民俗博物馆')" @mouseleave="transMuseum('')" height="98%" width="52%">
                    </div>
                    <div style="height:50%;width:100%">
                        <img :src="require('assets/img/represent/timeline_9.png')" @mouseenter="transMuseum('洛阳民俗博物馆')" @mouseleave="transMuseum('')" height="98%" width="98%">
                    </div>
                </div>
                <div class="timeline-imgs-part part4">
                    <img :src="require('assets/img/represent/timeline_10.png')" @mouseenter="transMuseum('洛阳周氏银器博物馆')" @mouseleave="transMuseum('')" height="98%" width="23%">
                    <div style="display:flex;flex-direction:column;width:20%;height:100%;justify-content:flex-end">
                        <img :src="require('assets/img/represent/timeline_11.png')" @mouseenter="transMuseum('洛阳唐艺金银器博物馆')" @mouseleave="transMuseum('')" height="61%" width="100%" style="margin-bottom:5%;margin-left:15%">
                        <img :src="require('assets/img/represent/timeline_12.png')" @mouseenter="transMuseum('洛阳老龙门农家博物馆')" @mouseleave="transMuseum('')" height="20%" width="100%">
                    </div>
                    <img :src="require('assets/img/represent/timeline_13.png')" @mouseenter="transMuseum('洛阳唐三彩陶艺博物馆')" @mouseleave="transMuseum('')" height="70%" width="25%" style="margin-left:2%">
                    <img :src="require('assets/img/represent/timeline_14.png')" @mouseenter="transMuseum('洛阳钟鼎青铜艺术博物馆')" @mouseleave="transMuseum('')" height="98%" width="26%" style="margin-left:2%">
                </div>
            </div>
            <div class="timeline-info">
                <img :src="require('assets/img/timeline_info.png')" width="98%" height="100%">
            </div>
        </div>
   </div>
</template>
 
<script>
export default {
   name: 'TimeLine',
   props: {
       base: {
           type: Object,
       }
   },
   computed: {
       styleBase() {
           return {
               width: this.base.width+"px",
               height: this.base.height+"px",
           }
       },
   },
   components: {
   },
   methods: {
       transMuseum(name) {
          this.$emit("timeLineSelectMethod",name)
       },
   },
   data () {
       return {
       }
   }
}
</script>
 
<style>
#TimeLine {
    display: flex;
    position: absolute;
    align-items: flex-end;
    justify-content: space-between
}
.title {
    width: 18%;
    height: 96%;
    display: flex;
    font-family: '微软雅黑';
    flex-direction: column;
    margin-left: 0.5%;
    color: #6d4131;
}
.title-up {
    text-align: right;
    font-weight: bold
}
.title-bottom {
    margin-top: 1.5%; 
}
.title-rect {
    height: 2px;
    width: 100%;
    background-color: #6d4131;
}
.title-content {
    width:100%;
    word-wrap:break-word;
    word-break:break-all;
    font-size:0.7em;
    line-height: 1.5em;
}
.timeline {
    height: 100%;
    width: 81%;
    display: flex;
    flex-direction: column;
}
.timeline-info{
 margin-top:20px; 
}
.timeline-imgs {
    width: 100%;
    height: 60%;
    display: flex;
}
.timeline-imgs-part {
    height: 100%;
    display: flex;
    margin-top: 10px
}
.part1 {
    width: 12%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end
}
.part2 {
    width: 43%;
}
.part3 {
    width: 12%;
    flex-direction: column;
}
.part4 {
    width: 30%;
    align-items: flex-end
}

.timeline-imgs-part img:hover {
    box-shadow: 5px 5px 10px rgba(0,0,0,.3);
}
</style>